<template>
  <div>
    <a-row style="padding: 0 5px">
      <a-col style="border-right: 1px solid #ddd; padding: 0 5px">
        <div v-if="unit && unit.unitname" style="display: flex; align-items: center">
          <div class="h1Title">{{ unit.unitname }}</div>
          <a-popover placement="rightTop">
            <template #content>
              <QrCode :value="'/pages/unit/unitInfo?id=' + unit.unitid" width="120" ref="qrRef" />
              <a-button @click="download" block size="small">下载</a-button>
            </template>
            <QrcodeOutlined style="font-size: 20px" />
          </a-popover>
        </div>
        <p v-if="unit.introduction">
          {{ unit.introduction }}
        </p>
        <p v-else> 该单元暂无介绍信息。 </p>
        <a-typography>
          <a-typography-paragraph v-if="unit.location"
            >该单元具体位置在<a-typography-text code>{{
              unit.location
            }}</a-typography-text></a-typography-paragraph
          >
          <!-- <a-typography-paragraph v-if="unit.resdeptname"
            >其责任部门为<a-typography-text code>{{
              unit.resdeptname
            }}</a-typography-text></a-typography-paragraph
          > -->
          <!-- <a-typography-paragraph v-if="unit.uccd"
            >属于<a-typography-text code>{{ unit.uccd }} </a-typography-text>单元分类下
          </a-typography-paragraph> -->
        </a-typography>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, onMounted, ref, toRefs, unref } from 'vue';

  import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
  import { QrcodeOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'UnitBasicInfoView',
    components: {
      QrCode,
      QrcodeOutlined,
      LeftOutlined,
      RightOutlined,
    },
    props: {
      unit: {
        required: true,
      },
    },
    setup(props) {
      const qrRef = ref<Nullable<QrCodeActionType>>(null);

      /**
       * 单元二维码下载
       */
      function download() {
        const qrEl = unref(qrRef);
        if (!qrEl) return;
        qrEl.download(unit.value.unitname);
      }
      return {
        qrRef,
        download,
      };
    },
  });
</script>

<style scoped lang="less">
  p {
    font-size: 1rem;
  }
  .h1Title {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: left;
    letter-spacing: 2px;
    margin: 10px 5px 10px 0;
  }
  .h2Title {
    font-size: 20px;
    font-weight: 700;
    text-align: left;
    letter-spacing: 2px;
    margin: 10px 5px 10px 0;
  }
</style>
